<template>
    <div>
        <div class="form">
            <h5>电站信息</h5>
            <el-form label-position="right" style="width:550px" :rules="rules" ref="ruleForm" label-width="120px" :model="pileInfo">
                <el-form-item prop="charging_pile_id" label="充电站编号:">
                    <el-input :disabled="disabled" v-model="pileInfo.charging_pile_id" placeholder="请输入电站编号"></el-input>
                </el-form-item>
                <el-form-item prop="station" label="充电站:">
                    <el-select :disabled="disabled" v-model="pileInfo.station" style="width:528px" placeholder="请选择">
                        <el-option
                            v-for="item in stationOption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-row :gutter="10"  type="flex">
                    <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="9">
                        <el-form-item prop="type" label="类型:">
                            <el-select :disabled="disabled" v-model="pileInfo.type" style="width:220px" placeholder="请选择">
                                <el-option
                                    v-for="item in typeOption"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="9" :offset="4">
                        <el-form-item prop="product_model" label="产品型号:">
                            <el-input :disabled="disabled" style="width:225px" v-model="pileInfo.product_model" placeholder="请输入产品型号"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="10"  type="flex">
                    <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="9">
                        <el-form-item prop="gun_type" label="单双枪类型:">
                            <el-select :disabled="disabled" v-model="pileInfo.gun_type" style="width:220px" placeholder="请选择">
                                <el-option
                                    v-for="item in gunsOption"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="9" :offset="4">
                        <el-form-item prop="gun_num" label="充电枪数:">
                            <el-input  :disabled="disabled" style="width:225px" v-model="pileInfo.gun_num" minlength="0" placeholder="请输入充电枪数"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item prop="rated_power" label="额定功率:">
                    <el-input :disabled="disabled" v-model="pileInfo.rated_power" placeholder="请输入额定功率"></el-input>
                </el-form-item>
                <h5 class="other">输入信息</h5>
                <el-form-item prop="input_voltage" label="输入电压:">
                    <el-input :disabled="disabled" v-model="pileInfo.input_voltage" placeholder="请输入电压"></el-input>
                </el-form-item >
                <el-form-item prop="frequency" label="频率:">
                    <el-input :disabled="disabled" v-model="pileInfo.frequency" placeholder="请输入频率"></el-input>
                </el-form-item>
                <el-form-item prop="rated_input_current" label="额定输入电流:">
                    <el-input :disabled="disabled" v-model="pileInfo.rated_input_current" placeholder="请输入额定输入电流"></el-input>
                </el-form-item>
                <el-form-item prop="power_factor" label="功率因数:">
                    <el-input :disabled="disabled" v-model="pileInfo.power_factor" placeholder="请输入功率因数"></el-input>
                </el-form-item>
                <h5 class="other">输出信息</h5>
                <el-form-item prop="voltage_range" label="电压范围:">
                    <el-input :disabled="disabled" v-model="pileInfo.voltage_range" placeholder="请输入电压范围"></el-input>
                </el-form-item>
                <el-form-item prop="max_voltage" label="最大电压:">
                    <el-input :disabled="disabled" v-model="pileInfo.max_voltage" placeholder="请输入最大电压"></el-input>
                </el-form-item>
                <el-form-item prop="output_voltage_error" label="输出电压误差:">
                    <el-input :disabled="disabled" v-model="pileInfo.output_voltage_error" placeholder="输出电压误差"></el-input>
                </el-form-item>
                <el-form-item prop="output_current_error" label="输出电流误差:">
                    <el-input :disabled="disabled" v-model="pileInfo.output_current_error" placeholder="输出电流误差"></el-input>
                </el-form-item>
                <el-form-item prop="regulation_accuracy" label="稳压精度:">
                    <el-input :disabled="disabled" v-model="pileInfo.regulation_accuracy" placeholder="请输入稳压精度"></el-input>
                </el-form-item>
                <el-form-item prop="stabilization_accuracy" label="稳流精度:">
                    <el-input :disabled="disabled" v-model="pileInfo.stabilization_accuracy" placeholder="请输入稳流精度"></el-input>
                </el-form-item>
                <el-form-item prop="status" label="状态:">
                    <el-select :disabled="disabled" class="select" v-model="pileInfo.status" placeholder="请选择">
                        <el-option
                        v-for="item in stateOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <div v-if="!$route.query.detail">
                    <el-form-item>
                        <el-button class="cancel" @click="$router.push('/ChargingPile')">取消</el-button>
                        <el-button v-if="$route.query.revise" class="confirm" @click="preserve('ruleForm')">保存</el-button>
                        <el-button v-else class="confirm" @click="submitForm('ruleForm')">确定</el-button>
                    </el-form-item>
                </div>
            </el-form>
          
        </div>
    </div>
</template>

<script>
import api from '@/api/jur.js'
    export default {
        data() {
            return {
                disabled:false,
                pileInfo:{},
                stationOption: [
                    {
                        value:null,
                        label:'请选择'
                    },
                    {
                        value:0,
                        label:'丰台产业园悦来电充电站'
                    },
                    {
                        value:1,
                        label:'总部基地悦来电充电站'
                    },
                ],
                typeOption: [
                    {
                        value:null,
                        label:'请选择'
                    },
                    {
                        value:1,
                        label:'直流'
                    },
                    {
                        value:2,
                        label:'交流'
                    },
                ],
                gunsOption: [
                    {
                        value:null,
                        label:'请选择'
                    },
                    {
                        value:1,
                        label:'单枪充电桩'
                    },
                    {
                        value:2,
                        label:'双枪充电桩'
                    },
                ],
                feeRulesOption:[
                    {
                        value:null,
                        label:'请选择'
                    },
                    {
                        value:1,
                        label:'计费规则'
                    },
                ],
                stateOptions:[
                    {
                        value:null,
                        label:'请选择'
                    },
                    {
                        value:1,
                        label:'启用'
                    },
                    {
                        value:0,
                        label:'禁用'
                    },
                ],
                rules: {
                    charging_pile_id: [
                        { required: true, message: '请输入编号', trigger: 'blur' },
                        { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
                    ],
                    station: [
                        { required: true, message: '请选择充电站', trigger: 'blur' }
                    ],
                    type: [
                        { required: true, message: '请选择类型', trigger: 'change' }
                    ],
                    product_model: [
                        { required: true, message: '请选择产品型号', trigger: 'change' }
                    ],
                    gun_type: [
                        { required: true, message: '请选择枪类型', trigger: 'blur' }
                    ],
                    gun_num: [
                        { required: true, message: '请输入正确的充电枪数', trigger: 'blur' },
                        { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
                    ],
                    input_voltage: [
                        { required: true, message: '请输入电压', trigger: 'change' },
                        { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
                    ],
                    frequency: [
                        { required: true, message: '请输入频率', trigger: 'change' },
                        { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
                    ],
                    rated_power: [
                        { required: true, message: '请输入额定功率', trigger: 'change' },
                        { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
                    ],
                    rated_input_current: [
                        { required: true, message: '请输入额定电流', trigger: 'blur' },
                        { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
                    ],
                    gun_count: [
                        { required: true, message: '请输入充电枪数', trigger: 'blur' },
                        { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
                    ],
                    power_factor: [
                        { required: true, message: '请输入功率因数', trigger: 'blur' },
                        { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
                    ],
                    voltage_range: [
                        { required: true, message: '请输入电压范围', trigger: 'blur' },
                        { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
                    ],
                    max_voltage : [
                        { required: true, message: '请输入最大电压', trigger: 'blur' },
                        { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
                    ],
                    output_voltage_error: [
                        {  required: true, message: '请输入输出电压误差', trigger: 'blur' },
                        { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
                    ],
                    output_current_error: [
                        {  required: true, message: '请输入输出电流误差', trigger: 'blur' },
                        { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
                    ],
                    regulation_accuracy: [
                        { required: true, message: '请输入稳压精度', trigger: 'blur' },
                        { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
                    ],
                    stabilization_accuracy: [
                        {  required: true, message: '请输入稳流精度', trigger: 'blur' },
                        { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
                    ],
                    status: [
                        { required: true, message: '请选择状态', trigger: 'change' }
                    ]
                }
            }
        },  
        mounted() {
            if(this.$route.query.detail){
                this.disabled = true
                this.getPileInfo(this.$route.query.id)
                console.log(11111111)
            } else if(this.$route.query.revise){
                console.log(1111)
                this.getPileInfo(this.$route.query.id)
            }
        },
        methods: {
            getPileInfo(id){
                api.getPileInfo({id}).then(res=>{
                    console.log('桩信息',res)
                    this.pileInfo = res.data.data
                })
            },
            handleChange (value) {
                console.log(value)
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                if (valid) {
                    console.log('传的对象',this.pileInfo)
                    api.addPile(this.pileInfo).then(res=>{
                        console.log('添加成功',res)
                        if(res.data.code == 200){
                            this.$message.success('添加成功')
                            setTimeout(()=>{
                                this.$router.push('/ChargingPile')
                            },500)
                        } else{
                            this.$message.warning('添加失败')
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
                });
            },
            preserve(formName) { // 修改
                this.$refs[formName].validate((valid) => {
                if (valid) {
                    // 验证完成
                    api.putPile(this.pileInfo).then(res=>{
                        if(res.data.code == 200){
                            this.$message.success('修改成功')
                            setTimeout(()=>{
                                this.$router.push('/ChargingPile')
                            },500)
                        } else{
                            this.$message.warning('修改失败')
                        }
                    })
                } else {
                    // console.log('error submit!!');
                    return false;
                }
                });
            },
        },
    }
</script>

<style lang="less" scoped>
h5{
    text-align: left;
    font-size: 16px;
    margin-bottom: 24px;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
    color: #000000;
}
.el-input{
    text-align: left;
    width: 528px;
}

.form{
    margin-left: 100px;
    text-align: left;
}
.el-time-select{
    display: inline-block;
    width: 210px;
}
.select{    
    width: 528px;
}
.cancel,.confirm{
    font-size: 16px;
    padding: 14px 54px;
}
.cancel{
    margin-top: 5px;
    font-weight: 600;
    margin-left: 112px;
}
.confirm{
    background: #165bff;
    color: white;
    border: 0;
}
.other{
    margin-top: 32px;
}
.el-textarea__inner {
    background: #f0f1f6 !important;
}
</style>